import { toast } from "sonner";
import { cn } from "@/lib/utils";

// Empty component with better styling
export function Empty() {
  return (
    <div 
      className={cn(
        "flex h-full flex-col items-center justify-center gap-4 text-center",
        "p-8 rounded-2xl bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-800/80"
      )}
      onClick={() => toast('即将上线，敬请期待！')}
    >
      <div className="w-16 h-16 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center">
        <i className="fa-solid fa-dumbbell text-slate-400 text-2xl"></i>
      </div>
      <h3 className="text-xl font-semibold text-slate-800 dark:text-slate-200">内容即将上线</h3>
      <p className="text-slate-500 dark:text-slate-400 max-w-md">
        我们正在努力准备更多精彩的健身内容，敬请期待！
      </p>
    </div>
  );
}